<template>
    <a-row :gutter="10">
        <a-col :md="24" :sm="24" style="margin-bottom: 20px">
            <a-card :bordered="false">

                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <!-- 搜索区域 -->
                    <div class="header_left">
                        <div style="float: left !important; text-align: left;">
                            <p><strong>内部合规审核标准：</strong></p> A:准确性审核；B:适用性审核；C:及时性审核；D:一致性审核;
                            <p><strong>标准说明：</strong> A:准确性审核：主要是从数据的真实性与精确性角度检查资料，其审核的重点是检查调查过程中所发生的误差。
                                B:适用性审核：主要是根据数据的用途，检查数据解释说明问题的程度。具体包括数据与调查主题、与目标总体的界定、与调查项目的解释等是否匹配。
                                C:及时性审核：主要是检查数据是否按照规定时间报送，如未按规定时间报送，就需要检查未及时报送的原因。
                                D:一致性审核：主要是检查数据在不同地区或国家、在不同的时间段是否具有可比性</p>
                        </div>
                        <br />
                        <div class="header_left_top">
                            <!-- 表单搜索 -->

                            <a-form-item label="选择审核标准: ">
                                <a-select placeholder="选择审核标准" style="width: 200px" @change="handleChange">
                                    <a-select-option value="A">
                                        A
                                    </a-select-option>
                                    <a-select-option value="B">
                                        B
                                    </a-select-option>
                                    <a-select-option value="C">
                                        C
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="任务名称检索: " :labelCol="labelCol">
                                <a-input placeholder="请输入XX的任务" />
                            </a-form-item>
                            <a-form-item label="指标名称检索: " :labelCol="labelCol">
                                <a-input placeholder="请输入" />
                            </a-form-item>
                        </div>
                    </div>

                    <div class="header_right">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button @click="searchReset" icon="reload">重置</a-button>
                        </span>

                    </div>
                </div>


                <div style="margin-top: 15px">
                    <a-table style="height: 500px" ref="table" size="middle" rowKey="id" :columns="columns"
                        :dataSource="dataSource1" :pagination="ipagination" :loading="loading" :rowSelection="{
                            selectedRowKeys: selectedRowKeys1,
                            onChange: onSelectChange1,
                        }" @change="handleTableChange">

                        <!-- 审核人 -->
                        <div slot="informant" slot-scope="text, record">
                            <span v-if="record.informant" class="avator">{{ record.informant.slice(0, 1) }}</span>
                            {{ record.informant }}
                        </div>
                        <!-- 状态 -->
                        <span slot="status" slot-scope="text, record">
                            <a-badge v-if="record.status == 3"
                                :number-style="{ backgroundColor: '#48d78e', borderRadius: '2px', color: '#fff', padding: '4px  8px', }"
                                status="error" text="未通过" />
                            <a-badge v-else-if="record.status == 1"
                                :number-style="{ backgroundColor: '#ff9800', borderRadius: '2px', color: '#fff', padding: '4px  8px', }"
                                status="processing" text="审核中" />
                            <a-badge v-else status="success"
                                :number-style="{ backgroundColor: '#48d78e', borderRadius: '2px', color: '#fff', padding: '4px  8px', }"
                                text="通过" />
                        </span>
                        <!-- 基础操作 -->
                        <span slot="action" slot-scope="text, record">
                            <!-- 查看 -->
                            <a v-if="record.action.includes('view')" class="action-btn" @click="viewReport()">查看</a>
                            &nbsp; &nbsp;

                            <!-- 通过 -->
                            <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirm"
                                v-if="record.action.includes('view')">
                                <template slot="title">
                                    <p>请确认该条数据通过？</p>
                                </template>
                                <a class="action-btn">通过</a>
                            </a-popconfirm>
                            &nbsp; &nbsp;

                            <!-- 未通过 -->
                            <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirm"
                                v-if="record.action.includes('view')">
                                <template slot="title">
                                    <p>请确认该条数据未通过？</p>
                                </template>
                                <a class="action-btn">未通过</a>
                            </a-popconfirm>
                            &nbsp; &nbsp;

                            <!-- 删除 -->
                            <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirm"
                                v-if="record.action.includes('view')">
                                <template slot="title">
                                    <p>你确定要删除这条数据吗?</p>
                                </template>
                                <a class="action-btn">删除</a>
                            </a-popconfirm>
                        </span>

                        <!-- 审核操作 -->
                        <span slot="action2" slot-scope="text, record">
                            <a-checkbox-group :options="plainOptions" :default-value="record.option"
                                @change="onOptionChange($event, record)" />
                        </span>
                    </a-table>
                </div>
            </a-card>

            <!-- 按钮 -->
            <a-button class>上一步</a-button>
            <a-button @click="deleteTask()">下一步</a-button>
            <a-button class>重置</a-button>
            <a-button class>保存</a-button>
            <a-button class>完成</a-button>
        </a-col>
    </a-row>
</template>
<script>

import {
    ListMixin
} from '@/mixins/ListMixin'
import {
    deleteAction,
    postAction,
    getAction
} from '@/api/manage'
const plainOptions = ['A', 'B', 'C']

import axios from 'axios'
export default {
    name: 'RoleUserList',
    mixins: [ListMixin],
    data() {
        return {
            model1: {},
            model2: {},
            currentRoleId: '',
            queryParam1: {},
            queryParam2: {},
            dataSource1: [],
            dataSource2: [],
            ipagination1: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            ipagination2: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            isorter1: {
                column: 'createTime',
                order: 'desc'
            },
            isorter2: {
                column: 'createTime',
                order: 'desc'
            },
            filters2: {},
            loading2: false,
            selectedRowKeys1: [],
            selectedRowKeys2: [],
            selectionRows1: [],
            selectionRows2: [],
            rightcolval: 0,
            columns: [{
                title: '名称',
                align: 'left',
                dataIndex: 'taskName'
            },
            {
                title: '年度',
                align: 'left',
                dataIndex: 'date'
            },
            // {
            //   title: '选择标准',
            //   align: 'left',
            //   dataIndex: 'selectioncriteria'
            // },
            {
                title: '所属部门组织',
                align: 'left',
                dataIndex: 'unit'
            },
            {
                title: '所属任务',
                align: 'left',
                dataIndex: 'owningtask'
            },
            {
                title: '审核人',
                align: 'left',
                dataIndex: 'informant',
                scopedSlots: {
                    customRender: 'informant'
                }
            },
            {
                title: '审核状态',
                align: 'left',
                dataIndex: 'status',
                filters: [{
                    text: '审核中',
                    value: '1'
                },
                {
                    text: '通过',
                    value: '2'
                },
                {
                    text: '未通过',
                    value: '3'
                }
                ],
                scopedSlots: {
                    customRender: 'status'
                }
            },
            {
                title: '提交时间',
                dataIndex: 'submissiontime',
                align: 'left',
                sorter: true
            },
            {
                title: '审核操作',
                dataIndex: 'action2',
                align: 'left',
                scopedSlots: {
                    customRender: 'action2'
                }
            },
            {
                title: '基础操作',
                dataIndex: 'action',
                align: 'left',
                scopedSlots: {
                    customRender: 'action'
                }
            },

            ],
            columns2: [{
                title: '用户账号',
                align: 'center',
                dataIndex: 'username',
                width: 120
            },
            {
                title: '用户名称',
                align: 'center',
                width: 100,
                dataIndex: 'realname'
            },
            {
                title: '状态',
                align: 'center',
                width: 80,
                dataIndex: 'status_dictText'
            },

            {
                title: '操作',
                dataIndex: 'action',
                scopedSlots: {
                    customRender: 'action'
                },
                align: 'center',
                width: 120
            }
            ],

            // 高级查询参数
            superQueryParams2: '',
            // 高级查询拼接条件
            superQueryMatchType2: 'and',
            url: {
                list: '/sys/role/list',
                delete: '/sys/role/delete',
                list2: '/sys/user/userRoleList',
                addUserRole: '/sys/user/addSysUserRole',
                delete2: '/sys/user/deleteUserRole',
                deleteBatch2: '/sys/user/deleteUserRoleBatch',
                exportXlsUrl: 'sys/role/exportXls',
                importExcelUrl: 'sys/role/importExcel'
            },
            labelCol: {
                offset: 2
            },
            plainOptions
        }
    },
    components: {
        // MergeTaskModal,
        // DetailTaskModal
    },
    computed: {
        importExcelUrl: function () {
            //    `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
            return ''
        },
        leftColMd() {
            return this.selectedRowKeys1.length === 0 ? 24 : 12
        },
        rightColMd() {
            return this.selectedRowKeys1.length === 0 ? 0 : 12
        }
    },
    mounted() {
        this.viewReport()
    },
    created() {
        this.getData()
    },
    methods: {

        async getData() {
            const result = await axios.get('/mock/InternalDataRightTable')
            this.dataSource1 = result.data.data
            console.log(result, '-----------------------------------------')


        },
        onOptionChange(checkedValues, row) {
            this.$set(row, 'option', checkedValues)
            console.log('checked = ', checkedValues, row)
        },


        handleChange(value) {
            console.log(`selected ${value}`)
        },
        onSelectChange2(selectedRowKeys, selectionRows) {
            this.selectedRowKeys2 = selectedRowKeys
            this.selectionRows2 = selectionRows
        },
        onClearSelected2() {
            this.selectedRowKeys2 = []
            this.selectionRows2 = []
        },
        onClearSelected1() {
            this.selectedRowKeys1 = []
            this.selectionRows1 = []
        },
        onSelectChange1(selectedRowKeys, selectionRows) {
            this.rightcolval = 1
            this.selectedRowKeys1 = selectedRowKeys
            this.selectionRows1 = selectionRows
            this.model1 = Object.assign({}, selectionRows[0])
            console.log(this.model1)
            this.currentRoleId = selectedRowKeys[0]
            this.loadData2()
        },
        onClearSelected() { },

        getQueryParams2() {
            //获取查询条件
            let sqp = {}
            if (this.superQueryParams2) {
                sqp['superQueryParams'] = encodeURI(this.superQueryParams2)
                sqp['superQueryMatchType'] = this.superQueryMatchType2
            }
            var param = Object.assign(
                sqp,
                this.queryParam2,
                this.isorter2,
                this.filters2
            )
            param.field = this.getQueryField2()
            param.pageNo = this.ipagination2.current
            param.pageSize = this.ipagination2.pageSize
            return filterObj(param)
        },
        getQueryField2() {
            //TODO 字段权限控制
            var str = 'id,'
            this.columns2.forEach(function (value) {
                str += ',' + value.dataIndex
            })
            return str
        },
        handleEdit2: function (record) {
            this.$refs.modalForm2.title = '编辑'
            this.$refs.modalForm2.roleDisabled = true
            this.$refs.modalForm2.edit(record)
        },
        handleAdd2: function () {
            if (this.currentRoleId == '') {
                this.$message.error('请选择一个角色!')
            } else {
                this.$refs.modalForm2.roleDisabled = true
                this.$refs.modalForm2.title = '新增'
                this.$refs.modalForm2.edit({
                    activitiSync: '1',
                    userIdentity: 1,
                    selectedroles: this.currentRoleId
                })
            }
        },
        modalFormOk() {
            // 新增/修改 成功时，重载列表
            this.loadData2()
        },
        confirm() { },
        loadData2(arg) {
            if (!this.url.list2) {
                this.$message.error('请设置url.list2属性!')
                return
            }
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination2.current = 1
            }
            if (this.currentRoleId === '') return
            let params = this.getQueryParams2() //查询条件
            params.roleId = this.currentRoleId
            this.loading2 = true
            getAction(this.url.list2, params).then((res) => {
                if (res.success) {
                    this.dataSource2 = res.result.records
                    this.ipagination2.total = res.result.total
                }
                this.loading2 = false
            })
        },
        handleDelete1: function (id) {
            this.handleDelete(id)
            this.dataSource2 = []
            this.currentRoleId = ''
        },
        handleDelete2: function (id) {
            if (!this.url.delete2) {
                this.$message.error('请设置url.delete2属性!')
                return
            }
            var that = this
            deleteAction(that.url.delete2, {
                roleId: this.currentRoleId,
                userId: id
            }).then((res) => {
                if (res.success) {
                    that.$message.success(res.message)
                    that.loadData2()
                } else {
                    that.$message.warning(res.message)
                }
            })
        },
        batchDel2: function () {
            if (!this.url.deleteBatch2) {
                this.$message.error('请设置url.deleteBatch2属性!')
                return
            }
            if (this.selectedRowKeys2.length <= 0) {
                this.$message.warning('请选择一条记录！')
                return
            } else {
                var ids = ''
                for (var a = 0; a < this.selectedRowKeys2.length; a++) {
                    ids += this.selectedRowKeys2[a] + ','
                }
                var that = this
                console.log(this.currentDeptId)
                this.$confirm({
                    title: '确认取消关联',
                    content: '是否删除选中数据?',
                    onOk: function () {
                        deleteAction(that.url.deleteBatch2, {
                            roleId: that.currentRoleId,
                            userIds: ids
                        }).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.loadData2()
                                that.onClearSelected()
                            } else {
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }
        },
        selectOK(data) {
            let params = {}
            params.roleId = this.currentRoleId
            params.userIdList = []
            for (var a = 0; a < data.length; a++) {
                params.userIdList.push(data[a])
            }
            console.log(params)
            postAction(this.url.addUserRole, params).then((res) => {
                if (res.success) {
                    this.loadData2()
                    this.$message.success(res.message)
                } else {
                    this.$message.warning(res.message)
                }
            })
        },

        handleAddUserRole() {
            if (this.currentRoleId == '') {
                this.$message.error('请选择一个角色!')
            } else {
                this.$refs.selectUserModal.visible = true
            }
        },
        handleOpen(record) {
            this.rightcolval = 1
            this.selectedRowKeys1 = [record.id]
            this.model1 = Object.assign({}, record)
            this.currentRoleId = record.id
            this.onClearSelected2()
            this.loadData2()
        },
        /*handleEdit: function(record) {
            if (this.currentRoleId == '') {
              this.$message.error('请选择一个角色!')
            } else {
              this.$refs.modalForm.edit(record)
              this.$refs.modalForm.title = '编辑'
            }
          },*/
        searchQuery2() {
            this.loadData2(1)
        },
        searchReset2() {
            this.queryParam2 = {}
            this.loadData2(1)

        },
        handleTableChange2(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            //TODO 筛选
            if (Object.keys(sorter).length > 0) {
                this.isorter2.column = sorter.field
                this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
            }
            this.ipagination2 = pagination
            this.loadData2()
        },
        hideUserList() {
            //this.rightcolval = 0
            this.selectedRowKeys1 = []
        },
        handlePerssion(roleId) {
            this.$refs.modalUserRole.show(roleId)
        }
    }
}
</script>
<style scoped lang="scss">
@import '@/assets/css/listcommon.scss';

/* @import '~@assets/less/common.less'; */
/** Button按钮间距 */
:deep .ant-badge-status-error {
    //background-color:rgba($color: #000000, $alpha: 0);
    display: none !important;
}

:deep .ant-badge-status-processing {
    display: none !important;
}

:deep .ant-badge-status-success {
    display: none !important;
}

.ant-btn,
.action-btn {
    margin-left: 8px;
}

::v-deep .ant-table .ant-table-body .ant-table-thead .ant-table-selection-column {
    text-align: center !important;
}

::v-deep .ant-table-thead>tr>th .anticon-filter,
.ant-table-thead>tr>th .ant-table-filter-icon {
    left: 60px !important;
}

.breadcrumb {
    padding: 10px 15px;
    border: 1px solid #eee;
    margin-bottom: 15px;
}

.table-page-search-submitButtons .ant-btn {
    border: 1px solid rgb(209, 208, 208) !important;
}

.table-page-search-submitButtons .ant-btn-primary {
    color: #fff !important;
    background: #1890ff !important;
}

::v-deep .ant-spin-container .ant-pagination.mini .ant-pagination-total-text {
    position: absolute;
    left: 0;
}

.table-page-search-wrapper .header_right {
    justify-content: flex-start;
}

.avator {
    padding: 5px;
    background: #64c4ff;
    border-radius: 50px;
    color: #fff;
}
</style>
